<template>
  <el-aside   :width="width"
  style="background-color: dimgrey; transition: width 0.3s;">

      <el-menu text-color="#fff"   :collapse="store.isCollapse" 
       style='background-color: dimgrey;' >
        <h3 v-show="!store.isCollapse">小怡后台管理系统</h3>
        <h3 v-show="store.isCollapse">后台</h3>
        <el-menu-item 
          v-for="item in noChildren" 
          :index="item.path" 
          :key="item.path"
        >
          <el-icon><component :is="getIcon(item.icon)" /></el-icon>
          <span>{{ item.label }}</span>
        </el-menu-item>
        
        <el-sub-menu 
          v-for="item in hasChildren" 
          :index="item.path" 
          :key="item.path"
        >
          <template #title>
            <el-icon><component :is="getIcon(item.icon)" /></el-icon>
            <span>{{ item.label }}</span>
          </template>
          <el-menu-item-group style="background-color: dimgrey;">
            <el-menu-item 
              v-for="subItem in item.children" 
              :index="subItem.path" 
              :key="subItem.path"
            >
              <el-icon><component :is="getIcon(subItem.icon)" /></el-icon>
              <span>{{ subItem.label }}</span>
            </el-menu-item>
          </el-menu-item-group>
        </el-sub-menu>
      </el-menu> 
   
  </el-aside>

</template>

<script setup>
import { computed, ref } from 'vue';
import {
  House,
  VideoPlay,
  User,
  Location,
  Setting,
} from '@element-plus/icons-vue'
import { useAllDateStore } from '@/stores'
const store = useAllDateStore()

const width = computed(() => store.menuWidth) 

const list = ref([
  {
    path: '/home',
    name: 'home',
    label: '首页',
    icon: 'House',
    url: 'Home'
  },
  {
    path: '/mall',
    name: 'mall',
    label: '商品管理',
    icon: 'VideoPlay',
    url: 'Mall'
  },
  {
    path: '/user',
    name: 'user',
    label: '用户管理',
    icon: 'User',
    url: 'User'
  },
  {
    path: '/other',
    label: '其他',
    icon: 'Location',
    children: [
      {
        path: '/page1',
        name: 'page1',
        label: '页面1',
        icon: 'Setting',
        url: 'Page1'
      },
      {
        path: '/page2',
        name: 'page2',
        label: '页面2',
        icon: 'Setting',
        url: 'Page2'
      }
    ]
  }
])

// 图标映射
const getIcon = (iconName) => {
  const icons = {
    House,
    VideoPlay,
    User,
    Location,
    Setting
  }
  return icons[iconName] || Setting
}

// 计算属性
const noChildren = computed(() => list.value.filter(item => !item.children))
const hasChildren = computed(() => list.value.filter(item => item.children))
</script>

<style lang="less" scoped>
.icons{
  width:18px;
height:18px;
margin-right:5px;

}
.el-menu{
  border-right:none;
  h3{
    line-height: 48px;
    color:rgb(9, 87, 156);
    text-align: center;
  }
}
.el-aside{
  height: 1230px !important;
background-color: dimgrey;
margin-top: -68px;
}
</style>